<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>popup tip</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.navigateBar {
	width: 400px;
	border: 0px solid gray;
	margin: 0 auto;
}
.item {
	border: 1px solid gray;
	margin: 5px;
	padding: 5px;
	background: #f3f3f3;
}
.item .img {
	border: 0px solid gray;
	float: left;
	position: relative;
}
.item .img img {
	width: 90px;
	height: 100px;
	cursor: pointer;
}
.item .imgTip {
	position: absolute;
	display : none;
	z-index: 5;
	width: 100px;
	height: 100px;
	border: 1px solid gray;
	background: #f3f3f3;
	opacity: 0.9;
	right: -103px;
	top: 0px;
}
.item .contain {
	margin-left: 90px;
	padding: 0 10px;
	border: 0px solid red;
}
.item .contain .title {
	/* margin-bottom: 10px; */
	padding: 0 5px 5px 5px;
}
.item a{
	text-decoration: none;
}
.item a:hover{
	color: gray;
	font-weight: bold;
}
.item .contain .content {
	/* margin-bottom: 10px; */
	padding: 0 5px 5px 5px;
	color: gray;
}
.clear {
	clear: both;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$(".item .img").mouseover(function(){
		/* $(this).nextAll(".imgTip").css("display","block"); */
		$(this).find(".imgTip").css("display","block");
	});
	$(".item .img").mouseout(function(){
		/* $(this).nextAll(".imgTip").css("display","none"); */
		$(this).find(".imgTip").css("display","none");
	});
});
</script>
</head>
<body>
	<div class="navigateBar">
	<%
		for(int i=0;i<3;i++){
	 %>
		<div class="item">
			<div class="img">
				<img alt="img" src="images/ubuntu.jpg" />
				<div class="imgTip">
					<div><a href="javascript:;">title</a></div>
					<div>this img tip</div>
				</div>
			</div>
			<div class="contain">
				<div class="title"><a href="javascript:;">this is title</a></div>
				<div class="content">content asdfasdfasdfcontent asdfasdfasdf</div>
			</div>
			<!-- <div class="imgTipHook ht-bottom"></div>
			<div class="imgTipHook ht-top"></div> -->
			<div class="clear"></div>
		</div>
	<%
		}
	 %>
	</div>
</body>
</html>
